$lightenArg: 7.5%; // hover 变亮值
$disabledArg: 20%; // disabled 变亮值
$darkenArg: 5%; // active 变暗值
$plainBgcArg: 33.7%; // 朴素背景
$plainBorArg: 22.5%; // 朴素边框

// 主要按钮
$primaryBgc: #1677ff;
// $primaryBgc: #1677ff;
// 成功按钮
$successBgc: #67c23a;
// 信息按钮
$infoBgc: #a6a9ad;
// 警告按钮
$warningBgc: #e6a23c;
// 危险按钮
$dangerBgc: #ff5722;


// 基本按钮
.re-btn {
  border: 1px solid #dcdfe6;
  white-space: normal;
  cursor: pointer;
  line-height: 1;
  background-color: #fff;
  color: #606266;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: .1s;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;

  &.flex {
    display: flex;
    align-items: center;
    justify-content: center;
  }


  -webkit-appearance: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;

  &:hover {
    border-color: #c6e2ff;
    background-color: #ecf5ff;
    color: #1677ff;
  }

  &:active {
    border-color: #3a8ee6;
  }

  &.plain {
    background-color: #fff;

    &:hover {
      border-color: #1677ff;
    }

    &:active {
      border-color: darken(#1677ff, 10%);
      color: darken(#1677ff, 10%);
    }

    &[disabled] {
      cursor: not-allowed;
      background-color: #fff;
      border-color: #ebeef5;
      color: #c0c4cc;
    }
  }

  &[disabled] {
    cursor: not-allowed;
    background-color: #fff;
    border-color: #ebeef5;
    color: #c0c4cc;
  }

  &.round {
    border-radius: 20px;
    padding: 12px 23px;

    &.medium {
      padding: 10px 20px;
    }

    &.small {
      padding: 9px 15px;
      font-size: 12px;
      border-radius: 20px;
    }

    &.mini {
      padding: 7px 15px;
      font-size: 12px;
      border-radius: 20px;
    }
  }

  &.circle {
    padding: 12px;
    border-radius: 50%;
  }

  &.medium {
    padding: 10px 20px;
  }

  &.small {
    padding: 9px 15px;
    font-size: 12px;
    border-radius: 3px;
  }

  &.mini {
    padding: 7px 15px;
    font-size: 12px;
    border-radius: 3px;
  }

  &.antd-radius{
    border-radius: 6px;
  }

  // 主要
  &.primary {
    color: #fff;
    background-color: $primaryBgc;
    border-color: $primaryBgc;

    &.plain {
      color: $primaryBgc;
      background-color: lighten($primaryBgc, 41%);
      border-color: lighten($primaryBgc, $plainBorArg);

      &[disabled] {
        background-color: lighten($primaryBgc, 41%);
        color: #8cc5ff;
        border-color: #d9ecff;
      }
    }

    &:hover {
      color: #fff;
      background-color: lighten($primaryBgc, $lightenArg);
      border-color: lighten($primaryBgc, $lightenArg);
    }

    &:active {
      color: #fff;
      background-color: darken($primaryBgc, $darkenArg);
      border-color: darken($primaryBgc, $darkenArg);
    }

    &[disabled] {
      cursor: not-allowed;
      background-color: lighten($primaryBgc, $disabledArg);
      border-color: lighten($primaryBgc, $disabledArg);
    }
  }

  // 成功
  &.success {
    color: #fff;
    background-color: $successBgc;
    border-color: $successBgc;

    &.plain {
      color: $successBgc;
      background-color: #f0f9eb;
      border-color: lighten($successBgc, $plainBorArg);

      &[disabled] {
        background-color: #f0f9eb;
        color: #a4da89;
        border-color: #e1f3d8;
      }
    }

    &:hover {
      color: #fff;
      background-color: lighten($successBgc, $lightenArg);
      border-color: lighten($successBgc, $lightenArg);
    }

    &:active {
      color: #fff;
      background-color: darken($successBgc, $darkenArg);
      border-color: darken($successBgc, $darkenArg);
    }

    &[disabled] {
      cursor: not-allowed;
      background-color: lighten($successBgc, $disabledArg);
      border-color: lighten($successBgc, $disabledArg);
    }
  }

  // 信息
  &.info {
    color: #fff;
    background-color: $infoBgc;
    border-color: $infoBgc;

    &.plain {
      color: $infoBgc;
      background-color: #f4f4f5;
      border-color: #d3d4d6;

      &[disabled] {
        background-color: #f4f4f5;
        color: #bcbec2;
        border-color: #e9e9eb;
      }
    }

    &:hover {
      color: #fff;
      background-color: lighten($infoBgc, $lightenArg);
      border-color: lighten($infoBgc, $lightenArg);
    }

    &:active {
      color: #fff;
      background-color: darken($infoBgc, $darkenArg);
      border-color: darken($infoBgc, $darkenArg);
    }

    &[disabled] {
      cursor: not-allowed;
      background-color: lighten($infoBgc, $disabledArg);
      border-color: lighten($infoBgc, $disabledArg);
    }
  }

  // 警告
  &.warning {
    color: #fff;
    background-color: $warningBgc;
    border-color: $warningBgc;

    &.plain {
      color: $warningBgc;
      background-color: #fdf6ec;
      border-color: lighten($warningBgc, $plainBorArg);

      &[disabled] {
        background-color: #fdf6ec;
        color: #f0c78a;
        border-color: #faecd8;
      }
    }

    &:hover {
      color: #fff;
      background-color: lighten($warningBgc, $lightenArg);
      border-color: lighten($warningBgc, $lightenArg);
    }

    &:active {
      color: #fff;
      background-color: darken($warningBgc, $darkenArg);
      border-color: darken($warningBgc, $darkenArg);
    }

    &[disabled] {
      cursor: not-allowed;
      background-color: lighten($warningBgc, $disabledArg);
      border-color: lighten($warningBgc, $disabledArg);
    }
  }

  // 危险
  &.danger {
    color: #fff;
    background-color: $dangerBgc;
    border-color: $dangerBgc;

    &.plain {
      color: $dangerBgc;
      background-color: #fef0f0;
      border-color: lighten($dangerBgc, $plainBorArg);

      &[disabled] {
        background-color: #fef0f0;
        color: #f9a7a7;
        border-color: #fde2e2;
      }
    }

    &:hover {
      color: #fff;
      background-color: lighten($dangerBgc, $lightenArg);
      border-color: lighten($dangerBgc, $lightenArg);
    }

    &:active {
      color: #fff;
      background-color: darken($dangerBgc, $darkenArg);
      border-color: darken($dangerBgc, $darkenArg);
    }

    &[disabled] {
      cursor: not-allowed;
      background-color: lighten($dangerBgc, $disabledArg);
      border-color: lighten($dangerBgc, $disabledArg);
    }
  }
}